<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta charset="utf-8">
    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
        <div id="example" class="k-content">

			<div id="shipping">
                <label for="countries" class="info">Choose shipping countries:</label>

                <input id="countries" />

                <div class="hint">Start typing the name of an European country</div>

			</div>

            <script>
                $(document).ready(function () {
                    var data = [
                            "Albania",
                            "Andorra",
                            "Armenia",
                            "Austria",
                            "Azerbaijan",
                            "Belarus",
                            "Belgium",
                            "Bosnia & Herzegovina",
                            "Bulgaria",
                            "Croatia",
                            "Cyprus",
                            "Czech Republic",
                            "Denmark",
                            "Estonia",
                            "Finland",
                            "France",
                            "Georgia",
                            "Germany",
                            "Greece",
                            "Hungary",
                            "Iceland",
                            "Ireland",
                            "Italy",
                            "Kosovo",
                            "Latvia",
                            "Liechtenstein",
                            "Lithuania",
                            "Luxembourg",
                            "Macedonia",
                            "Malta",
                            "Moldova",
                            "Monaco",
                            "Montenegro",
                            "Netherlands",
                            "Norway",
                            "Poland",
                            "Portugal",
                            "Romania",
                            "Russia",
                            "San Marino",
                            "Serbia",
                            "Slovakia",
                            "Slovenia",
                            "Spain",
                            "Sweden",
                            "Switzerland",
                            "Turkey",
                            "Ukraine",
                            "United Kingdom",
                            "Vatican City"
                        ];

                    //create AutoComplete UI component
                    $("#countries").kendoAutoComplete({
                        dataSource: data,
                        filter: "startswith",
                        placeholder: "Select country...",
                        separator: ", "
                    });
                });
            </script>
            <style scoped>
                .info {
                    display: block;
                    line-height: 22px;
                    padding: 0 5px 5px 0;
                    color: #36558e;
                }

                #shipping {
	                width: 482px;
	                height: 152px;
	                padding: 110px 0 0 30px;
	                background: url('../../content/web/autocomplete/shipping.png') transparent no-repeat 0 0;
                    margin: 30px auto;
                }

                .k-autocomplete
                {
                    width: 250px;
                    vertical-align: middle;
                }

                .hint {
                    line-height: 22px;
                    color: #aaa;
                    font-style: italic;
                    font-size: .9em;
                    color: #7496d4;
                }
            </style>
        </div>

	
			
</body>
</html>
